<template>
    <el-dialog v-model="dialogData.visible" :title="dialogData.title" center width="66%" top="10vh" :close-on-click-modal="false" append-to-body>
        <div class="dialog-content">
            <el-table :data="tableData" style="width: 100%" border>
                <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
                <el-table-column type="nickname" label="用户" align="center">
                    <template #default="scope">
                        <div class="flex" style="align-items:center;gap:10px;justify-content:center;">
                            <el-avatar :src="scope.row.avatarUrl" fit="fill"></el-avatar>
                            <span>{{ scope.row.nickname }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="createdAt" label="创建时间" align="center"></el-table-column>
                <el-table-column prop="updatedAt" label="更新时间" align="center"></el-table-column>
            </el-table>
        </div>
    </el-dialog>
</template>


<script setup>
import { reactive, ref } from 'vue'
import motionLikeApi from 'api/model/motion-like.js'

const emits = defineEmits(['update'])
defineExpose({ openDialog })

// 编辑相关数据
const dialogData = reactive({
    title: '动作点赞用户列表',
    visible: false,
    motionId: ''
})

/**
 *  获取素材列表
 */
const tableData = ref([])
const getList = async () => {
    const { code, data = [] } = await motionLikeApi.getMotionLikeUserList.get({
        motionId: dialogData.motionId,
    })
    tableData.value = data
}

/**
 * 打开弹框
 * @param type
 * @param item
 */
function openDialog (type, item) {
    if (type === 'like') {
        dialogData.visible = true
        dialogData.motionId = item.id
        getList()
    }
}

</script>

